<template>
	<view class="dAlert" v-show="show">
		<!--  -->
		<view class="wrapperAlert" @click="closeModal">
			<view class="wrapperAlertBox" @click.stop="" @touchmove.stop.prevent="">
				<view class="xianxian">
					<image @click.stop="clickBtn('cancel')" class="quxiaosho" src="../../pagesA/static/qiandao/qianaocg3.png" mode=""></image>
				</view>
				<view class="qiandaoname" v-show="content=='签到成功'">
					{{content}}
				</view>
				<view class="qiandaonameb"  v-show="content!='签到成功'">
					{{content}}
				</view>

				<view class="lainxuqiandao" v-show="content=='签到成功'">
					已连续签到 {{title}} 天
				</view>
				<view class="quqiandaoff"  v-if="content!='签到成功'" @click.stop="clickBtn('confirm')">
					去签到
				</view>
				<view class="quqiandaossss"  v-if="content!='签到成功'" >
					连续签到奖励更多哦～
				</view>
				<view class="zuorenwu" v-if="content=='签到成功'">
					<view class="hangxian">
						
					</view>
					<view class="">
						做福利任务赚{{jine}}元红包
					</view>
					<view class="hangxian">
						
					</view>
				</view>
				<view class="quxiadan" v-if="content=='签到成功'">
					<view class="maicairenwu">
						<image class="maicaiimg" src="../../pagesA/static/qiandao/qiandaotupian.png" mode=""></image>
						<view class="">
							<view class="maicairenwub">
								买菜返现任务
							</view>
							<view class="dingdan">
								{{renwu}}
							</view>
						</view>
						
						
					</view>
					<view  class="quxiadanan" @click.stop="quxiadanbtn" >
						去下单
					</view>
					
				</view>
				<view class="tupianimg" >
					<image  v-show="content=='签到成功'" class="diandaocg" src="../../pagesA/static/qiandao/chenggong.png" mode=""></image>
					<image  v-show="content!='签到成功'"  class="diandaocg" src="../../pagesA/static/qiandao/qiandaozhongduan.png" mode=""></image>
				</view>



			<!-- 	<view class="wrapperAlertBoxFooter">
					<view class="wrapperAlertBoxFooterBox"  v-if="showCancel" :style="cancelColor" @click.stop="clickBtn('cancel')">{{cancelText}}</view>
					<view class="wrapperAlertBoxFooterBit" v-if="showCancel"></view>
					<view class="wrapperAlertBoxFooterBox" :style="confirmColor" @click.stop="clickBtn('confirm')">{{confirmText}}</view>
				</view> -->

			</view>

		</view>
		<!--  -->
		<view class="maskHiddenmask" v-show="show"></view>
		<!--  -->
	</view>
</template>

<script>
	export default {
		computed: {
			show(){
				return this.$modalStore.state.show;
			},
			title(){
				return this.$modalStore.state.title;
			},
			jine(){
				return this.$modalStore.state.jine;
			},
			renwu(){
				return this.$modalStore.state.renwu;
			},
			content(){
				return this.$modalStore.state.content;
			},
			showCancel(){
				return this.$modalStore.state.showCancel;
			},
			cancelText(){
				return this.$modalStore.state.cancelText;
			},
			cancelColor(){
				return "color:"+this.$modalStore.state.cancelColor;
			},
			confirmText(){
				return this.$modalStore.state.confirmText;
			},
			confirmColor(){
				return "color:"+this.$modalStore.state.confirmColor;
			}
		},
		props:{
		},
		data() {
			return {
			};
		},
		watch:{
			alertStatus(e){
				if (e==true) {
					this.alertStatus = true
				}
			}
		},
		methods:{
			//去下单
			quxiadanbtn(){
				console.log('去下单')
				uni.switchTab({
					url: '/pages/index/indexs'
				});
			},
			closeModal(){
				this.$modalStore.commit('hideModal')
			},
			clickBtn(res){
				
				console.log('取消')
				this.$modalStore.commit('success',res)
				this.$modalStore.commit('hideModal')
			},
			demo(){
				this.alertStatus = this.alertStatus==true?false:true
			}
		},
		beforeDestroy(){
			this.$modalStore.commit('hideModal')
		}
	}
</script>

<style lang="scss" scoped>
	.maskHiddenmask {
		z-index: 10000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: 0.4;
		transition: background-color .15s linear;
	}

	.wrapperAlert {
		z-index: 12000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: background-color .15s linear;
		display: flex;
		align-items: center;
		justify-content: center;

		.wrapperAlertBox {
			width: 518rpx;
			// height: 350rpx;
			background: #FDFFFC;
			border-radius: 16rpx;
			position: relative;
			// padding-bottom:  ;
			.xianxian {
				position: absolute;
				right: 42rpx;
				top: -100rpx;
				width: 2rpx;
				height: 100rpx;
				background: #33CE00;
				border-radius: 1rpx;
				.quxiaosho {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -40rpx;
					left: -21rpx;
				}
			}
			.tupianimg {
				width: 256rpx;
				height: 256rpx;
				background: #FDFFFC;
				border-radius: 100%;
				position: absolute;
				top: -104rpx;
				left: 134rpx;
				.diandaocg {
					width: 252rpx;
					height: 132rpx;
					margin-top: 44rpx;
				}
			}
			.quxiadan {
				width: 454rpx;
				height: 72rpx;
				margin-top: 45rpx;
				margin-left: 32rpx;
				padding-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.quxiadanan {
					width: 104rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #36B542;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #36B542;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.maicairenwu {
					display: flex;
					align-items: center;
					width: 338rpx;
					.maicaiimg {
						width: 72rpx;
						height: 72rpx;
						margin-right: 8rpx;
					}
					
					.maicairenwub {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					.dingdan {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 4rpx;
					}
					
				}
			}
			.zuorenwu {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36B542;
				margin-top: 32rpx;
				width: 458rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 40rpx;
				
				.hangxian {
					width: 100rpx;
					height: 2rpx;
					background: #B6EABB;
					border-radius: 10rpx;
				}
				
			}
			.quqiandaossss {
				text-align: center;
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36B542;
				padding-bottom: 50rpx;
			}
			.quqiandaoff {
				margin-top: 176rpx;
				width: 226rpx;
				height: 44rpx;
				background: #36B542;
				border-radius: 29rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left:146rpx ;
			}
			.lainxuqiandao {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top:154rpx;
			}
			.qiandaonameb {
				margin-top: 102rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #898D86;
				position: absolute;
				left: 198rpx;
				z-index: 9;
			}
			.qiandaoname {
				margin-top: 102rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #36B542;
				position: absolute;
				left: 198rpx;
				z-index: 9;
			}
			.wrapperAlertBoxTitle {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #762cd9;
			}
			.wrapperAlertBoxCenter {
				width: 100%;
				height: 135rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #C0C0C0;
				color: red;

			}
			.wrapperAlertBoxBit {
				width: 100%;
				height: 1rpx;
				background-color: #f2f2f2;
			}

			.wrapperAlertBoxFooter {
				width: 100%;
				height: 100rpx;
				// background-color: red;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.wrapperAlertBoxFooterBox {
					width: 290rpx;
					height: 115rpx;
					// background-color: #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.wrapperAlertBoxFooterBit {
					width:1rpx;
					height:40rpx;
					background:#f2f2f2;
				}
			}

		}



	}
</style>
